<template>
    <div class="demoAll">
        <!-- //动态改变数据 -->
        <SchoolN title="美食" >
            <img width="200px" src="https://www.bnacg.com/uploads/2012/1-20123011040X33.jpg" alt="">
        </SchoolN>
        <SchoolN title="游戏" >
            <ul>
                <li v-for="(item,index) in games " :key=index>{{item}}</li>
            </ul>
        </SchoolN>
        <SchoolN title="电影" >
            <video controls src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>
        </SchoolN>
    </div>
</template>
<script>
    import SchoolN from './compoents/SchoolN'
    export default {
        name: 'App',
        components: {
            SchoolN
        }, data() {
            return {
                foods: ['火锅', '烧烤', '小龙虾', '牛排'],
                games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'],
                films: ['《教父》', '《拆弹专家》', '《你好，李焕英》', '《尚硅谷》']
            }
        }

    }
</script>
<style scoped>
    .demoAll {
        display: flex;
        justify-content: space-between;
    }
</style>